$(function () {
    $(".toggleIcon").on('click', function () {
        $(this).toggleClass('toggle')
    })
    drawLine();
})

function drawLine() {
    // 计算容器宽度
    var _w = $("#flow").width();
    // 计算容器每行有多少个
    var _n = 10;
    // 获取一共多少个标签
    var _all = $("#flow").find("li").length;
    // 计算会有几行
    var _cols = Math.ceil(_all / _n);
    for (var i = 1; i <= _cols; i++) {
        if (i * _n != _all) {
            $("#flow").find("li").eq(i * _n - 1).addClass("last")
        }
        if (i % 2 != 0) {
            $("#flow").find("li").eq(i * _n - 1).addClass('right');
            $("#flow").find("li").eq(i * _n).addClass('right');
        } else {
            $("#flow").find("li").eq(i * _n).addClass('left');
            $("#flow").find("li").eq(i * _n - 1).addClass('left');
        }
    }
    for (var i = 0; i < _all; i++) {
        // 奇数行处理
        if (Math.floor(i / _n) % 2 == 0) {
            $("#flow").find("li").eq(i).addClass('fl');
            if (i == _all - 1) {
                $("#flow").find("li").eq(i).addClass('right');
                if (_all % 10 == 0 || _all % 10 == 1) {
                    $("#flow").find("li").eq(i).addClass('end-node');
                }
            }
        }
        // 偶数行处理
        else {
            $("#flow").find("li").eq(i).addClass('fr');
            if (i == _all - 1) {
                $("#flow").find("li").eq(i).addClass('left');
                if (_all % 10 == 0 || _all % 10 == 1) {
                    $("#flow").find("li").eq(i).addClass('end-node');
                }
            }
        }
    }
}
